<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.page.css">
	<style type="text/css">
		body{
			font-family: "微软雅黑";
		}
	</style>
</head>
<body>
<!-- 注册 -->
<div id="zc">
	<div class="logo">
			<div class="logo-1">
				<p style="margin-left: 94px;">欢迎登录360同城帮
					<span class="close"><span class="closes"><a class="delete" href="###">X</a></span></span>
				</p>
			</div>
		</div>
	<div id="zc-left">
		<ul>
			<li>手机注册</li>
			<li>邮箱注册</li>
		</ul>
	</div>
	<div id="zc-right">
		用户名 <input type="text" name="" id="txt-z">
		<p>请输入您的手机号</p>
		验证码 <input type="text" name=""><input type="text" name="" value="5c54"><a href="#">换一张</a>
		<p>请输入图中的字母或数字，不区分大小写</p>
		校验码 <input type="text" name=""> <input type="text" name="" value="免费获取校验码">
		<p>请输入短信中6位数字校验码<a href="#">校验码常见问题</a></p>
		密码 <input type="text" name="" id="pass-z">
		<p>6-20个字符(区分大小写)</p>
		<input type="button" name="" value="马上注册" id="btn1">
	</div>
</div>
<!-- 登陆 -->
<div class="wrap"></div>
	<div class="load">
		<div class="logo">
			<div class="logo-1">
				<p style="margin-left: 94px;">欢迎登录360同城帮
					<span class="close"><span class="closes"><a class="delete" href="###">X</a></span></span>
				</p>
			</div>
		</div>
		<div class="line"></div>
		<div class="logo-content">
			<div class="logos">
				<p>账号：<input placeholder="手机号/用户名/邮箱" type="text" id="txt2"></p>
				<p>密码：<input placeholder="请输入您的密码" type="text" id="pass2"></p>
				<span>
					<input type="checkbox" name="">下次自动登录
				</span>
				<button class="div"></button>
				<p style="display: flex; border-bottom: 1px solid #ccc">
					<span style="color: #888;">其他账号登录：</span>
					<span>
						<img class="spans" src="">
					</span>
				</p>
			</div>
			<p class="p1" align="center">
				<span><a style="color: #999"href="###">注册新账号</a></span>
				<span>|</span>
				<span><a style="color: skyblue" href="###">忘记密码？</a></span>
			</p>
		</div>
	</div>
<!-- 客服服务 -->
<div id="kf1">
	<ul>
		<li>客服服务</li>
		<li>帮助中心</li>
		<li>维修付款</li>
	</ul>
</div>
<!-- 投诉 -->
<div id="tt">
<p style="width: 100%;height:30px;line-height: 30px;
background: #eee; border-bottom: 1px solid black;">投诉建议<span style="float: right;" id="gg">x</span></p>
<p style="line-height: 50px;">你好，如对我们的服务意见或意见，请发邮件至：<a href="#">tab-fankui@bang.360.cn</a>详细说明</p>
<p><input type="button" name="" value="确定" style="margin-left:200px;" id="qd"></p>
</div>
<!-- 在线客服 -->
<div id="cc">
	<h5><li><img src="images/36.png" style="margin-top:5px;"></li><li>360诚诚<br>同城帮服务</li>   <li style="margin-left:100px;" id="guan">x</li></h5>
	<div id="tab"></div>
	<div id="xie"><input type="text" name="" style="width: 100%;height: 85%;" id="txt"><input type="button" name="" value="发送" id="fs"></div>
</div>
<!-- 隐藏城市盒子 -->
<div id="city1">
	<input type="button" name="" value="关闭X" style="float: right;" id="close">
	<p>城市列表</p>
	<div id="city1-1">
		 <ul>
				<li>热门</li>
				<li class="list">北京</li>
				<li class="list">上海</li>
				<li class="list">广州</li>
				<li class="list">天津</li>
				<li class="list">西安</li>
				<li class="list">深圳</li>
				<li class="list">武汉</li>
				<li class="list">成都</li>
				<li class="list">重庆</li>
				<li class="list">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				<li class="list">南京</li>
				<li class="list">沈阳</li>
				<li class="list">杭州</li>
				<li class="list">济南</li>
				<li class="list">郑州</li>
		</ul>
		<p id="py">拼音 <span style="margin-left:15px;">A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>W</span><span>X</span><span>Y</span><span>Z</span></p>
		<div id="py-one">
			
		</div>	
	</div>

</div>
<!-- 1 -->
	<div id="top">
		<ul>
			<li style="width: 110px;"><span id="city">北京</span><a href="#" id="btn">[切换城市]</a></li>
			<li style="border-right: none;">同城帮首页</li>
			<li style="margin-left: 27%" id="dl">登陆</li>
			<li id="zzc">注册</li>
			<li>我的订单</li>
			<li style="width: 170px;" class="zx">在线客服(9:00-21:00)</li>
			<li id="kf">客服服务<img src="images/2313213_03.jpg"></li>
			<li>论坛</li>
			<li><a href="#" style="color: red;" id="ts">投诉建议</a></li>
		</ul>
	</div>
<!-- 2 -->
	<div id="nav">
		<ul>
			<li style="margin-left: 0;"><img src="images/35.png"></li>
			<li style="margin-left:360px;">二手优品</li>
			<li>手机回收</li>
			<li>手机维修</li>
			<li>电脑维修</li>
			<li>以旧换新</li>
			<li>手机租用</li>
		</ul>
	</div>
<!-- 3 -->
<div id="lun">
	<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="images/5.png" alt="第一张"></div>
        <div class="item"><img src="images/6.png" alt="第二张"></div>
        <div class="item"><img src="images/34.jpg" alt="第三张"></div>
    </div>

    <!-- <a href="#myCarousel" data-slide="prev" class="carousel-control left"> -->
        <span class="glyphicon glyphicon-chevron-left aria-hidden='true'"></span>  <!--&lsaquo;-->
    </a>
    <!-- <a href="#myCarousel" data-slide="next" class="carousel-control right"> -->
        <span class="glyphicon glyphicon-chevron-right aria-hidden='true'"></span> <!--&rsaquo;-->
    </a>
</div>
<!-- 定位 -->
	<div id="kuang">
		<ul>
			<li id="lis"><img src="images/2_03.png"><span style="margin-left: 20px;">修手机/Pad</span>  >
			<div id="divs" style="color: black;font-size: 12px;" class="divs1">
				<table  width="600" id="tab1" height="500">
					
				</table>
			</div>
			</li>
			<li id="lis"><img src="images/2_06.png"><span style="margin-left: 20px;">修电脑</span>  >
			<div id="divs" style="color: black" class="tab2">
				<h6><a>热门问题</a><span></span><span></span><span></span><span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span></span></h6>
				<h5><a>其他问题</a><span></span><span></span><span></span><span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span><span></span><span></span><span></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span></h5>
			</div>
			</li>
			<li id="lis"><img src="images/2_08.png"><span style="margin-left: 20px;">卖手机/电脑</span> >
			<div id="divs" style="color: black" class="tab3">
				<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
			</div>
			</li>
			<li id="lis"><img src="images/2_10.png"><span style="margin-left: 20px;">买二手</span>  >
			<div id="divs" style="color: black" class="tab4">
				<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
			</div>
			</li>
		</ul>
	</div>
	
	
</div>
<!-- 手机换屏 -->
<div id="center1">
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
</div>
<!-- 热门手机回收 -->
<h3 id="hot">热门手机回收</h3>
<div id="guzhi">
	<p style="float: left;"><img src="images/4_03.png" style="height: 100%;"></p>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="width: 100%; margin-top:30px;"><h5></h5></li>
</div>
<h3 id="hot" style="margin-top:11px;">优品精选</h3>
<div id="guzhi">
	<p style="float: left;"><img src="images/4_06.png" style="height: 100%; margin-left: 3px;"></p>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
</div>
<h3 id="hot" style="margin-top:10px;">到店维修</h3>
<div id="bottom">
	<div id="qq">北京<img src="images/2313213_03.jpg"></div>
	<div id="qq">选择区县<img src="images/2313213_03.jpg"></div> 
	 <input type="text" name="" placeholder="输入您的位置查找附近的商家" style="width: 400px;height: 50px; border:1px solid green; margin-left: 10px;" id="test"><input type="text" name="" value="搜索" style="width: 100px;height: 50px;color: white;background: green; border:1px solid green;text-align: center">
	 <div id="big">
	 <!-- 下面左边的盒子 -->
		<div id="left">
			<div id="left1">
				<li>默认排序</li>
				<li>按成交量</li>
				<li>按人气</li>
				<li><input type="checkbox" name="">先行赔付</li>
				<li style="margin-left:300px;"><img src="images/1.png" id="dt"></li>
			</div>
			<div id="left2">
				<ul class="ww">
				<li><img src=""  style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				<li class="dian">进入店铺</li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				<li class="dian">进入店铺</li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				<li class="dian">进入店铺</li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				<li class="dian">进入店铺</li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				<li class="dian">进入店铺</li>
				</ul>
				<!-- 分页 -->
				<div id="page"></div>
			</div>
		</div>
		<!-- 下面右边的盒子 -->
		<div id="right">
			<h4 id="hh">
				商家好评榜
			</h4>
			<ul>
				<li>1 <img src="images/3.jpg"><span>炼金城维修中心</span><br><span style="margin-left: 110px">121324条评论</span></li>
				<li>2 <img src="images/24.jpg"><span>顺通电脑维修</span><br><span style="margin-left: 110px">111105条评论</span></li>
				<li>3 <img src="images/32.gif"><span>盛宏科技CBD维修工作</span><br><span style="margin-left: 110px">98580条评论</span></li>
				<li>4 <img src="images/23.jpg"><span>百佳电脑维修</span><br><span style="margin-left: 110px">50689条评论</span></li>
				<li>5 <img src="images/9.gif"><span>鸿翔科技北京有限</span><br><span style="margin-left: 110px">322112条评论</span></li>
				<li>6 <img src="images/25.jpg"><span>北京开天科技维修中心</span><br><span style="margin-left: 110px">15213条评论</span></li>
				<li>7 <img src="images/9.gif"><span>sssss中兴电脑维修</span><br><span style="margin-left: 110px">12209条评论</span></li>
			</ul>
		</div>
	 </div>
</div>
<!-- 下一页 -->

<!-- 脚步 -->
<div id="footer">
			<div id="foot-nav">
				<ul id="t1">
					<li><img src="images/38.png" /> <span>购物指南</span></li>
					<li class="w"><a href="#">购物流程</a></li>
					<li class="w"><a href="#">用户注册</a></li>
					<li class="w"><a href="#">帮助文档</a></li>
				</ul>
				<ul id="t2">
					<li><img src="images/29.png" /> <span>支付方式</span></li>
					<li class="w"><a href="#">在线支付</a></li>
					<li class="w"><a href="#">当面付款</a></li>
				</ul>
				<ul id="t3">
					<li><img src="images/40.png" /> <span>售后服务</span></li>
					<li class="w"><a href="#">投诉建议</a></li>
				</ul>
				<ul id="t4">
					<li><img src="images/41.png" /> <span>特色保障</span></li>
					<li class="w"><a href="#">360担保支付</a></li>
				</ul>
				<ul id="t5">
					<li><img src="images/42.png" /> <span>商家合作</span></li>
					<li class="w"><a href="#">加盟同城帮</a></li>
					<li class="w"><a href="#">新闻采访/跨界合作</a></li>
				</ul>
			</div>
			<div id="foot-w">
				<p style="padding-top: 30px;">客服电话：4000-399-360 / 010-53767360 投诉建议 网站地图</p>
				<p>Copyright ? 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
				<p><a href="#">京ICP备08010314号-19</a>    京公网安备110000000006号</p>
			</div>
		</div>
	<div id="container" tabindex="0"></div>
	<div style="font-size: 20px; color: red;z-index:999999;position:fixed;right:150px;top:30px;display: none;" id="xx">X</div>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/style.js"></script>
 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=81fce25fb81bcbca0d0c7faf6ab927c0"></script>
 <script type="text/javascript" src="js/baiduTemplate.js"></script>
 <script type="text/javascript" src="js/jquery.page.js"></script>
<script type="text/javascript">

        var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.480983, 40.0958]
        });
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView','AMap.Geolocation','AMap.MapType'],
    function(){
        map.addControl(new AMap.ToolBar());

        map.addControl(new AMap.Scale());

        map.addControl(new AMap.OverView({isOpen:true}));
        map.addControl(new AMap.Geolocation());
        map.addControl(new AMap.MapType());
});
//添加标记
var marker = new AMap.Marker({
	position:[112.186739, 35.690141],
	title:"高德地图？",
	map:map,
	icon:"t01647448c59c844934.png"
});

//在线搜索
AMap.plugin('AMap.Autocomplete',function(){//回调函数
    //实例化Autocomplete
    var autoOptions = {
        city: "中国", //城市，默认全国
        input:"test"//使用联想输入的input的id
    };
    autocomplete= new AMap.Autocomplete(autoOptions);
    //TODO: 使用autocomplete对象调用相关功能
})
$.get("http://localhost:3000/json/pingmu.json",function(data){
	// console.log(data);
	$("#tab1").html(baidu.template("tp1",data));
})

</script>
<script type="text/html" id="tp1">
	<%for(var i = 0;i < result.length;i++){%>
		<tr>
			<th><%=result[i].name+">"%></th>
			<%for(var j = 0;j < result[i].list.length;j++){%>
				<td><%="|"+result[i].list[j].name%></td>
			<%}%>
		</tr>
	<%}%>
</script>
</html>